/**
 * UCSC Xena Client
 * http://xena.ucsc.edu
 *
 * Styles for tooltip that is displayed on column hover (or alt-click on column to freeze tooltip).
 */

.Tooltip {
	align-items: center;
	display: flex;
	height: 32px;
	justify-content: space-between;
	left: 0;
	padding: 0 24px;
	position: absolute;
	right: 0;
	top: 0;
	width: 100%;
}

/* Fade on horizontal scroll - RHS */
.Tooltip.frozen::after {
	background: linear-gradient(90deg, rgba(255, 255, 255, 0), #ffffff, #ffffff);
	content: '';
	height: 100%;
	position: absolute;
	right: 48px; /* Positions before close icon */
	top: 0;
	width: 16px;
}

/* Tooltip - frozen */
.Tooltip.frozen {
	z-index: 1200;
}

/* Rows */
.content {
	align-items: center;
	display: flex;
	list-style: none;
	overflow-x: auto; /* Horizontal scroll - hide webkit scrollbar unless actively scrolling. */
	-ms-overflow-style: -ms-autohiding-scrollbar; /* Hide scrollbar in IE unless actively scrolling. */
	white-space: nowrap;
	width: 100%;
}

.content::-webkit-scrollbar {
	display: none;
}

/* All <li>, excluding .title */
.content li:not(.title) {
	align-items: center;
	display: flex;
}

/* Last <li> */
.content li:last-of-type {
	padding-right: 16px;
}

/* Sample display text */
.title {
	align-items: flex-start;
	display: flex;
	flex-direction: column;
}

.title span {
	min-width: 124px;
}

/* Dot */
.content li:not(:first-child):before {
	background-color: rgba(0, 0, 0, 0.12);
	border-radius: 4px;
	content: '';
	display: inline-flex;
	flex: none;
	height: 4px;
	margin: 0 8px;
	width: 4px;
}

/* Secondary spans within <li>, excluding .title */
.content li:not(.title) span:not(:first-of-type) {
	margin-left: 8px;
}

.moreGene {
	align-self: center;
	font-size: 10px;
}
